<template>
    <fragment>
        <template v-for="item in menuList">
            <el-submenu :index="item.index" v-if="item.children.length !== 0">
                <template slot="title">
                    <i :class="item.meta.icon"></i>
                    <span slot="title">{{ item.meta.title }}</span>
                </template>

                <MenuSon :menuList="item.children"></MenuSon>
            </el-submenu>

            <el-menu-item :index="item.path" v-else @click="openCurrentPage(item)">
                <i :class="item.meta.icon"></i>
                <span slot="title">{{ item.meta.title }}</span>
            </el-menu-item>
        </template>
    </fragment>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        name: "MenuSon",
        data() {
            return {};
        },

        computed: {
            ...mapState(["navList"])
        },

        props: ["menuList"],

        methods: {
            // 点击当前菜单打开页面
            openCurrentPage (item) {
                let tagObj = {
                    name: item.name,
                    title: item.meta.title,
                    actived: true,
                    router: item.path
                }

                if (item.meta.keepAlive) {
                    tagObj['meta'] = {
                        keepAlive: item.meta.keepAlive
                    }
                }

                this.$store.commit("addTag", tagObj);
                this.$store.commit("cache", item);// 缓存路由
            }
        },
    };
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>